<template>
    <el-upload
        action="none"
        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
        :show-file-list="false"
        :on-change="beforeAvatarUpload"
        :auto-upload="false">
        <div v-if="!props.modelValue" class="upload-box">
            <el-icon><Plus /></el-icon>
            <span>点击上传</span>
        </div>
        <div v-else class="image-box">
            <el-image style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
            <div class="mask">更换封面</div>
        </div>
    </el-upload>
    <!-- <div class="upload-file-box"  @mouseover="mouseOver" @mouseleave="mouseLeave">
    <el-image style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
    <el-icon v-if="isShow" @click="delFile" class="del" :style="{ fontSize: '18px'}">
      <Delete />
    </el-icon>
    <div class="hover-img"></div>
  </div> -->
    <!-- <div class="upload-file-text">图片支持JPG、PNG、JPEG格式，大小2M以内，建议宽高比为1：1，尺寸200px*200px。</div> -->
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, isShallow } from 'vue';
import { ElForm, ElMessage, ElMessageBox, UploadProps, FormRules } from 'element-plus';
import { uploadFile2 } from '@/api/common';

interface Props {
    modelValue: string;
}
const isShow = ref(false);
const mouseOver = () => {
    isShow.value = true;
};
const mouseLeave = () => {
    isShow.value = false;
};
const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
});
const emit = defineEmits(['update:modelValue', 'change']);

const beforeAvatarUpload = (rawFile: any) => {
    let flag = true;
    if (!rawFile) {
        flag = false;
    }
    const types = ['jpg', 'png'];
    if (!types.includes(rawFile.name.split('.').pop())) {
        ElMessage.error('图片格式不正确！');
        flag = false;
    }
    if (rawFile.size / 1024 > 200) {
        ElMessage.error('上传图片大小不能超过200kb');
        flag = false;
    }
    flag && uploadFun(rawFile.raw, rawFile.name);
};

const uploadFun = (file: any, fileName: string) => {
    uploadFile2({
        file,
        fileName
    }).then((r: any) => {
        const { url } = r;
        emit('update:modelValue', url);
        emit('change', r);
    });
};

const delFile = () => {
    emit('update:modelValue', '');
    emit('change', null);
};
</script>
<style scoped lang="scss">
$length: 100px;

.upload-box {
    border: 1px dashed #ff6b00;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: $length;
    height: $length;
    background-color: #f8f8f8;
    box-sizing: border-box;
    .el-icon {
        color: #ff6b00;
        font-size: 40px;
    }
    span {
        padding-top: 8px;
        font-size: 12px;
        color: #666;
        letter-spacing: 1px;
    }
}

.image-box {
    width: $length;
    height: $length;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    &:hover {
        .mask {
            visibility: visible;
        }
    }
    .el-image {
        width: 100%;
        height: 100%;
    }
    .mask {
        visibility: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        width: $length;
        height: 30px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
    }
}

.upload-file-box {
    width: $length;
    height: $length;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    .hover-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }
    .hover-img:hover {
        // background-color: rgba(255,255,255,0.72);
        // opacity: 1;
    }
    .del {
        z-index: 9;
        position: absolute;
        right: 4px;
        top: 4px;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #ccc;
        color: #fff;
        &:hover {
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0.72);
            opacity: 1;
        }
    }
}
.upload-file-text {
    margin-top: 10px;
    line-height: 1.4;
    font-size: 12px;
    color: #999;
}
</style>
